<template>
  <div style="line-height:0px">
    <div style="text-align: left;">
      <span style="margin-left: 20px">车位号：</span>
      <el-input v-model="page.data.parkNum" style="width: 130px" clearable placeholder="请输入车位号"></el-input>
      <span style="margin-left: 20px">用户姓名：</span>
      <el-input v-model="page.data.name" style="width: 120px" clearable placeholder="请输入姓名"></el-input>
      <span style="margin-left: 20px">用户电话：</span>
      <el-input v-model="page.data.phone" style="width: 140px" clearable placeholder="请输入电号码"></el-input>
      <span style="margin-left: 10px">车位状态：</span>
      <el-select v-model="page.data.status" style="width:150px" clearable placeholder="请选择车位状态">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <!-- <el-button icon="el-icon-edit"  style="margin-left: 20px" type="success" @click="found">登记车位</el-button> -->
      <el-button icon="el-icon-search" style="margin-left: 20px; margin-top: 15px;" type="primary" @click="found">查找
      </el-button>
      <el-button icon="el-icon-download" style="margin-left: 20px" slot="trigger" type="success" @click="download">导出
      </el-button>
    </div>
    <el-table class="tableBorder" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" :row-style="{ 'height':'20px' }" :data="tableData"
      style="width: 100% ;margin-top: 30px;" :stripe="true" :border="true" :highlight-current-row="true" size="mini">
      <el-table-column prop="id" label="车位ID" width="90px" row>
      </el-table-column>
      <el-table-column prop="parkNum" label="车位号" width="130px">
      </el-table-column>
      <el-table-column prop="type" label="类型" width="110px">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.type == 0">地面</el-tag>
          <el-tag type="warning" v-else-if="scope.row.type == 1">地库</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用户名" width="110px">
      </el-table-column>
      <el-table-column prop="phone" label="电话号码" width="160px">
      </el-table-column>
      <el-table-column label="车位状态" width="110px">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.status == 0"><b>售出</b></el-tag>
          <el-tag type="info" v-else-if="scope.row.status == 1"><b>空闲</b></el-tag>
          <el-tag type="warning" v-else-if="scope.row.status == 2"><b>维修</b></el-tag>
          <el-tag type="success" v-else-if="scope.row.status == 3"><b>租用</b></el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary " @click="handleReg(scope.row)">登记</el-button>
          <el-button size="mini" @click="handleStatus(scope.row)">状态</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align:center">
      <el-pagination :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page.pagePlus.current" :page-sizes="page.pagePlus.pagesizes" :page-size="page.pagePlus.size"
        layout="total, sizes, prev, pager, next, jumper" :total="page.pagePlus.total">
      </el-pagination>
    </div>
    <el-dialog title="车位信息" width="50%" :visible.sync="dialogFormVisible" append-to-body center
      :close-on-click-modal="false">
      <el-form>
        <el-form-item>
          <span style="margin-right: 10px"><b>车位号码</b></span>
          <el-tag type="success">{{park.parkNum}}</el-tag>
          <span style="margin-left: 80px;margin-right: 10px"><b>车位类型</b></span>
          <el-tag type="success" v-if="park.type == 0">地面</el-tag>
          <el-tag type="warning" v-else-if="park.type == 1">地库</el-tag>

          <span style="margin-left: 80px;margin-right: 10px"><b>车位状态</b></span>
          <el-select v-model="park.status" style="width:120px" clearable placeholder="车位状态">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="margin-right: 10px"><b>用户姓名</b></span>
          <el-input v-model="landlord.name" style="width: 120px" placeholder="请输入姓名"></el-input>
          <span style="margin-left: 20px;margin-right: 10px"><b>用户电话</b></span>
          <el-input v-model="landlord.phone" style="width: 140px" placeholder="请输入电号码"></el-input>
          <el-button icon="el-icon-search" style="margin-left: 30px; margin-top: 15px;" type="primary" @click="landlordfound">查找
          </el-button>
        </el-form-item>
        <el-form-item>
          <span style="margin-right: 10px"><b>业主列表</b></span>
          <el-table class="tableBorder" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }" :row-style="{ 'height':'20px' }" :data="landlordtableData"
            style="width: 100% ;margin-top: 30px" :stripe="true" :border="true" :highlight-current-row="true"
            size="mini">
            <el-table-column prop="name" label="用户名">
            </el-table-column>
            <el-table-column prop="phone" label="电话号码">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary " @click="handleDoReg(scope.row)">登记车位</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="text-align:center">
            <el-pagination :background="true" @current-change="handleCurrentChangelandlord"
              :current-page="page.pagePlus.current" :page-size="landlordPage.size" 
              layout="total, prev, pager, next" :total="landlordPage.total">
            </el-pagination>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="车位状态" width="25%" :visible.sync="ztdialogFormVisible" append-to-body center
      :close-on-click-modal="false">
      <el-form>
        <el-form-item style="margin-left: 30px" label="车牌号码">
          <el-tag type="success">{{ztpark.parkNum}}</el-tag>
        </el-form-item>
          <el-form-item style="margin-left: 30px" label="车位状态">
            <el-select v-model="ztpark.status" style="width:120px" clearable placeholder="车位状态">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ztcancel">取 消</el-button>
        <el-button type="primary" @click="doztpark">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
data() {
return {
  ztpark:{
    id:null,
    parkNum:null,
    status:null,
  },
  landlord: {
    name: "",
    phone: "",
    page: 1,
    pageSize: 5,
  },
  park: {
    id: null, 
    parkNum: "",
    status: "",
    landlordId:null,
  },
  dialogFormVisible: false,
  ztdialogFormVisible:false,
  options: [{
    value: '0',
    label: '售出'
  }, {
    value: '1',
    label: '空闲'
  }, {
    value: '2',
    label: '维修'
  }, {
    value: '3',
    label: '租用'
  }],
  tableData: [],
  landlordtableData: [],
  page: {
    data: {
      name: "",
      phone: "",
      parkNum: "",
      status: ""
    },
    pagePlus: {
      current: 1,
      size: 10,
      pagesizes: [10, 20, 50, 100],
      total: null,
    },
  },
  landlordPage: {
      current: 1,
      size: 5,
      total: null,
    },
}
},
methods: {
  download() {
    this.$axios
        .post("http://127.0.0.1:8080/api/v1/car/park/download", this.page, {
          responseType: "blob",
        }).then((flow) => {
      if (!flow.data) return;
      const blob = new Blob([flow.data]);
      const blobUrl = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.style.display = "none";
      a.download = "车位表.xlsx"; // 自定义下载的文件名
      a.href = blobUrl;
      a.click();
    });
  },
  handleStatus(park){
    this.ztpark.id=park.id;
    this.ztpark.parkNum=park.parkNum;
    this.ztpark.status=park.status;
    this.ztdialogFormVisible=true;
  },
  doztpark(){
    this.$axios({
      method: 'post',
      url: "http://127.0.0.1:8080/api/v1/car/park/update",
      data: this.ztpark,
    }).then((r) => {
      if (r.data.code == 200) {
        this.ztdialogFormVisible=false;
        this.ztgsuccess();
        this.list();
      }
    })
  },
  ztcancel(){
    this.ztdialogFormVisible=false;
    this.ztpark.id=null;
    this.ztpark.parkNum=null;
    this.ztpark.status=null;
  },
  resetField(){
    this.landlord.name="";
    this.landlord.phone="";
  },
  handleDoReg(landlord){ 
    this.park.landlordId=landlord.id;
    this.$axios({
      method: 'post',
      url: "http://127.0.0.1:8080/api/v1/car/park/update",
      data: this.park,
    }).then((r) => {
      if (r.data.code == 200) {
        this.dialogFormVisible=false;
        this.regsuccess();
        this.page.data.parkNum=this.park.parkNum;
        this.list();
      }
    })
  },
    handleReg(park){
    this.park.id=park.id;
    this.park.parkNum=park.parkNum;
    this.park.type=park.type;
    this.dialogFormVisible=true;
    this.resetField();
    this.landlordlist();
  },
  landlordlist(){
    this.$axios.post("http://127.0.0.1:8080/api/v1/yz/list", this.landlord).then(r => {
       if (r.data.code == 200) {
         this.landlordtableData = r.data.data.data;
         this.landlordPage.total = r.data.data.totalNum;
        } 
      })
  },
  list() {
    this.$axios({
      method: 'post',
      url: "http://127.0.0.1:8080/api/v1/car/park/list",
      data: this.page,
    }).then((r) => {
      this.tableData = [];
      if (r.data.code == 200) {
        this.tableData = r.data.data.records;
        this.page.pagePlus.total = r.data.data.total;
      }
    })
  }, 
  found() {
    this.list();
  },
  landlordfound() {
    this.landlord.page = 1;
    this.landlordlist();
  },
  handleSizeChange(val) {
    this.page.pagePlus.size = val;
    this.list();
  },
  handleCurrentChangelandlord(val) {    
    this.landlord.page = val;
    this.landlordlist();
  },
  handleCurrentChange(val) {
    this.page.pagePlus.current = val;
    this.list();
  },  
  regsuccess() {
      this.$message({
        showClose: true,
        message: '车位登记成功',
        type: 'success'
      });
    },
    ztgsuccess() {
      this.$message({
        showClose: true,
        message: '车位状态修改成功',
        type: 'success'
      });
    },
},
created() {
  this.list();
}
}
</script>